<template>
	<div class="warn-burst-container">
		<el-card shadow="hover" body-style="padding:8px; ">
			<el-form :inline="true" :model="formInline" size="mini">
				<el-form-item label-width="100px" label="区域">
					<el-input v-model="formInline.areaName" placeholder="请输入..."></el-input>
				</el-form-item>
				<el-form-item label-width="100px" label="柜子">
					<el-input v-model="formInline.cabinetName" placeholder="请输入..."></el-input>
				</el-form-item>
				<el-form-item style="margin-left: 20px">
					<el-button type="primary" @click="init" icon="el-icon-search" size="small">查询</el-button>
					<el-button type="success" plain @click="onExportExcel" icon="el-icon-document" size="small">导出</el-button>
				</el-form-item>
			</el-form>
			<el-table
	ref="multipleTable"
				id="tableExcel"
				:data="tableData"
				:default-sort="{ prop: 'name', order: 'descending' }"
				:row-style="{ height: '37px' }"
				:cell-style="{ padding: '0' }"
				size="medium"
				style="width: 100%"
			>
				<el-table-column align="center" label="序号" width="60" type="index" />
				<el-table-column align="center" property="areaName"  prop="areaName" label="区域" show-overflow-tooltip />
				<el-table-column align="center" property="cabinetName"  label="柜子" show-overflow-tooltip />
				<el-table-column align="center" property="boxName"  label="箱子" show-overflow-tooltip />
				<el-table-column align="center" property="eviCount"  label="当前容量" show-overflow-tooltip />
				<el-table-column align="center" property="total"  label="总容量" show-overflow-tooltip> </el-table-column>
				<!-- <el-table-column align="center" property="status"  label="预警容量" show-overflow-tooltip> </el-table-column> -->
				<el-table-column align="center" property="noticeTime"  label="预警时间" show-overflow-tooltip> 
					<template #default="scope">{{ `${dateFormatTime(scope.row.noticeTime)}` }}</template>
				</el-table-column>
			</el-table>
			<el-pagination
				:page-sizes="[100, 200, 300, 1000]"
				:page-size="state.formInline.pageSize"
				layout="prev, pager, next, jumper,total,sizes"
				:total="total"
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				prev-text="上一页"
				next-text="下一页"
				background
			>
			</el-pagination>
		</el-card>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { exportExcel } from '/@/common/excel';
import { queryStockQuantity } from '/@/api/warn/index';
import { dateFormatTime } from '/@/common/index';

export default {
	name: 'warnBurst',
	components: {},
	setup() {
		const router = useRouter();
		const state = reactive({
			total: 0,
			formInline: {
				page: 1,
				pageSize: 10,
				areaName: '',
				cabinetName: '',
			},
			tableData: [],
		});

		async function init() {
			await queryStockQuantity(state.formInline).then((res: any) => {
				if (res.success) {
					state.tableData = res.data.data;
					state.total = res.data.totalCount;
				}
			});
		}

		const onDetailsInfo = (row: any) => {
			router.push({
				path: '/evidence/unit/details',
				query: { caseid: row.caseId },
			});
		};

		const onHandleCurrentChange = (page) => {
			state.formInline.page = page;
			init();
		};

		const onHandleSizeChange = (pageIndex) => {
			state.formInline.pageSize = pageIndex;
			init();
		};

		const onExportExcel = () => {
			exportExcel('tableExcel', '预警', '预警-未及时入库数据列表.xlsx');
		};
		init();
		return {
			init,
			onExportExcel,
			onHandleCurrentChange,
			onHandleSizeChange,
			onDetailsInfo,
			state,
			dateFormatTime,
			...toRefs(state),
		};
	},
};
</script>
